<template>
  <div>
    <div class="boxHead">
      <!--面包屑导航-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>宿舍管理</el-breadcrumb-item>
        <el-breadcrumb-item>来访人员列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card class="box-card">
      <!--来访人员列表区域-->
      <el-table :data="visitersList"
                ref="visitersRef"
                highlight-current-row>
        <el-table-column type="index"
                         :index="indexMethod"></el-table-column>
        <el-table-column label="姓名"
                         prop="name"></el-table-column>
        <el-table-column label="电话"
                         prop="tel"></el-table-column>
        <el-table-column label="被访人姓名"
                         prop="visitedName"></el-table-column>
        <el-table-column label="所在楼宇"
                         prop="tower"></el-table-column>
        <el-table-column label="被访宿舍号"
                         prop="dorm"></el-table-column>
        <el-table-column label="值班人员"
                         prop="watch"></el-table-column>
        <el-table-column label="访问事由"
                         min-width='100px'
                         prop="matter"></el-table-column>
        <el-table-column label="备注"
                         min-width='100px'
                         prop="remake"></el-table-column>
        <el-table-column label="访问时间"
                         min-width='70px'
                         prop="visitTime"></el-table-column>
        <el-table-column label="离开时间"
                         min-width='70px'
                         prop="leaveTime"></el-table-column>
        <el-table-column label="是否完成"
                         min-width='130px'>
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isLeave"
                       active-text="已完成"
                       inactive-text="未完成"
                       @change="hadLeft(scope.row._id,scope.row.leaveTime)"
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="dataList.pagenum"
                     :page-sizes="[1, 3, 5, 7]"
                     :page-size="dataList.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { formDate } from 'commonjs/formatDate.js'
export default {
  name: 'DormVisitList',
  props: [''],
  data () {
    return {
      visitersList: [],
      dataList: {
        pagenum: 1,
        pagesize: 7
      },
      total: 0
    }
  },
  created () {
    this.getVisitersList()
  },
  methods: {
    // 给表格添加索引
    indexMethod (index) {
      return (index + 1)
    },
    async getVisitersList () {
      this.visitersList = []
      const { data: res } = await this.$axios.get('/visit/findVisiters', {
        params: {
          tower: window.localStorage.getItem('tower'),
          pagenum: this.dataList.pagenum,
          pagesize: this.dataList.pagesize
        }
      })
      // console.log(res)
      if (res.meta.code === 200) {
        res.visitersList.forEach(valid => {
          if (valid.leaveTime) {
            // console.log('存在离开时间')
            valid.visitTime = formDate(valid.visitTime)
            valid.leaveTime = formDate(valid.leaveTime)
            valid.isLeave = true
            this.visitersList.push(valid)
          } else {
            // console.log('不存在离开时间')
            valid.visitTime = formDate(valid.visitTime)
            valid.isLeave = false
            this.visitersList.push(valid)
          }
        })
        // console.log(this.visitersList)
        this.total = res.total
      } else {
        this.$message.error(res.meta.msg)
      }
    },
    handleSizeChange (size) {
      this.dataList.pagesize = size
      this.getVisitersList()
    },
    handleCurrentChange (currentPage) {
      this.dataList.pagenum = currentPage
      this.getVisitersList()
    },
    async hadLeft (_id, leaveTime) {
      const { data: res } = await this.$axios.get('/visit/visiterLeft', {
        params: {
          _id,
          leaveTime
        }
      })
      // console.log(res)
      if (res.meta.code === 200) {
        this.$message.success(res.meta.msg)
      } else {
        this.$message.error(res.meta.msg)
      }
      this.getVisitersList()
    }
  }
}

</script>
<style lang='' scoped>
</style>
